﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>修改密码</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .layui-card {
            max-width: 400px;
            margin: 0 auto;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 8px;
            padding: 20px;
        }

        .layui-form-item {
            margin-bottom: 15px;
        }

        .layui-form-label {
            width: 120px;
            font-weight: 500;
        }

        .navbar {
            display: none;
        }
    </style>
</head>
<body>
    <div class="layui-card">
        <div class="layui-card-header" style="text-align: center; font-size: 20px; color: #007bff; font-weight: bold;">修改密码</div>
        <div class="layui-card-body" style="border">
            <form class="layui-form" id="changePasswordForm">
                <!-- 隐藏域存储用户ID -->
                <input type="hidden" name="userId" id="userId">

                <div class="layui-form-item">
                    <label class="layui-form-label">新密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="pass"
                               lay-verify="required|passStrength"
                               placeholder="请输入新密码（6-20位）"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">确认密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="confirmPassword"
                               lay-verify="required|passEqual"
                               placeholder="请再次输入新密码"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submitChange">提交修改</button>
                        
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="https://cdn.staticfile.org/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/layui/2.6.8/layui.min.js"></script>
    <script>
        // 获取Cookie函数
        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        layui.use(['form', 'layer'], function() {
            const form = layui.form;
            const layer = layui.layer;

            // 初始化：从Cookie获取用户ID
            const userId = getCookie('id');
            if (!userId) {
                layer.msg('请先登录', { icon: 2, time: 1500 }, function() {
                    window.location.href = '@Url.Action("Login", "User")'; // 替换为实际登录页路径
                });
                return;
            }
            $('#userId').val(userId);

            // 自定义表单验证规则
            form.verify({
                // 密码强度验证（示例：至少6位）
                passStrength: [/^.{6,20}$/, '密码长度需在6-20位之间'],
                // 确认密码一致性验证
                passEqual: function(value, item) {
                    if (value !== $('[name=pass]').val()) {
                        return '两次输入的密码不一致';
                    }
                }
            });

            // 表单提交事件
            form.on('submit(submitChange)', function(data) {
                const field = data.field;
                const pass = field.pass;
                const userId = getCookie('id'); // 重新获取确保最新值
                var postdata={
                    userId:userId,
                    pass:pass
                }
                // 发送修改密码请求
                $.ajax({
                    url: `@ViewBag.BaseUrl/T5/User/UpdPassUser`, // 后端接口地址                    
                    type: 'POST',
                    data: JSON.stringify(postdata),
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function(res) {
                        if (res.code === 100) { // 假设100为成功状态码
                            layer.msg('密码修改成功', { icon: 1 }, function() {
                                // 可选：清空密码Cookie（如果需要重新登录）
                                // setCookie('pass', '', -1);
                               window.location.reload(); // 刷新当前页面
                            });
                        } else {
                            layer.msg(res.msg || '密码修改失败', { icon: 2 });
                        }
                    },
                    error: function(xhr, status, error) {
                        layer.msg('网络请求失败，请重试', { icon: 2 });
                        console.error('修改密码请求错误:', error);
                    }
                });
                return false; // 阻止表单默认提交
            });
        });

        // 设置Cookie函数（如果需要）
        function setCookie(name, value, days) {
            let expires = '';
            if (days) {
                const date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = `; expires=${date.toUTCString()}`;
            }
            document.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/`;
        }
    </script>
</body>
</html>    